<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易富文本编辑器</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="editor-container">
    <!--工具栏-->
    <div class="toolbar">
<!--        <button class="btn btn-operate" data-command="undo" title="撤销">-->
<!--            <svg viewBox="0 0 1024 1024">-->
<!--                <path d="M512 64A510.272 510.272 0 0 0 149.984 213.984L0.032 64v384h384L240.512 304.48A382.784 382.784 0 0 1 512.032 192c212.064 0 384 171.936 384 384 0 114.688-50.304 217.632-130.016 288l84.672 96a510.72 510.72 0 0 0 173.344-384c0-282.784-229.216-512-512-512z"></path>-->
<!--            </svg>-->
<!--        </button>-->
<!--        <button class="btn btn-operate" data-command="redo" title="重做">-->
<!--            <svg viewBox="0 0 1024 1024">-->
<!--                <path d="M0.00032 576a510.72 510.72 0 0 0 173.344 384l84.672-96A383.136 383.136 0 0 1 128.00032 576C128.00032 363.936 299.93632 192 512.00032 192c106.048 0 202.048 42.976 271.52 112.48L640.00032 448h384V64l-149.984 149.984A510.272 510.272 0 0 0 512.00032 64C229.21632 64 0.00032 293.216 0.00032 576z"></path>-->
<!--            </svg>-->
<!--        </button>-->
        <button class="btn btn-operate" data-command="bold" title="加粗"><b>B</b></button>
        <button class="btn btn-operate" data-command="underline" title="下划线"><u>U</u></button>
        <button class="btn btn-operate" data-command="italic" title="斜体"><i>I</i></button>
        <button class="btn btn-operate" data-command="strikeThrough" title="删除线"><del>S</del></button>
        <div class="input-box">
            <!-- <button class="btn max-width" title="文字颜色">字体颜色</button> -->
            <label for="colorPicker"></label>
            <input class="btn" id="colorPicker" type="color" data-title="字体颜色">
        </div>
        <div class="font-size-div">
            <button class="btn max-width select-size-btn" title="字体">默认字号</button>
            <div class="select-font-size">
                <ul>
                    <li data-value="14px" class="selected" title="默认字号">
                        <svg viewBox="0 0 1446 1024">
                            <path d="M574.116299 786.736392 1238.811249 48.517862C1272.390222 11.224635 1329.414799 7.827718 1366.75664 41.450462 1403.840015 74.840484 1406.731043 132.084741 1373.10189 169.433699L655.118888 966.834607C653.072421 969.716875 650.835807 972.514337 648.407938 975.210759 615.017957 1012.29409 558.292155 1015.652019 521.195664 982.250188L72.778218 578.493306C35.910826 545.297758 32.859041 488.584019 66.481825 451.242134 99.871807 414.158803 156.597563 410.800834 193.694055 444.202665L574.116299 786.736392Z"></path>
                        </svg>
                        <span data-value="14px">默认字号</span>
                    </li>
                    <li data-value="12px" title="12px"><span data-value="12px">12px</span></li>
                    <li data-value="13px" title="13px"><span data-value="13px">13px</span></li>
                    <li data-value="14px" title="14px"><span data-value="14px">14px</span></li>
                    <li data-value="15px" title="15px"><span data-value="15px">15px</span></li>
                    <li data-value="16px" title="16px"><span data-value="16px">16px</span></li>
                    <li data-value="19px" title="19px"><span data-value="19px">19px</span></li>
                    <li data-value="22px" title="22px"><span data-value="22px">22px</span></li>
                    <li data-value="24px" title="24px"><span data-value="24px">24px</span></li>
                    <li data-value="29px" title="29px"><span data-value="29px">29px</span></li>
                    <li data-value="32px" title="32px"><span data-value="32px">32px</span></li>
                    <li data-value="40px" title="40px"><span data-value="40px">40px</span></li>
                    <li data-value="48px" title="48px"><span data-value="48px">48px</span></li>
                </ul>
            </div>
        </div>
    </div>
    <!--编辑器-->
    <div id="editor" class="editor-content" contenteditable="true" placeholder='请输入'>
        <p>包含节点与文本节点的一部分的文档片段</p>
    </div>
</div>

<script src="./editor.js"></script>

</body>
</html>
